<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
		<button type="button" id="" onclick="btuclick()">按钮</button>
		<button type="button" id="but2">按钮2</button>
		<button type="button" id="but3">按钮3</button>
		<div id="div1" style="width: 200px; height:300px ; background-color: black;" onclick="divclick();"></div>

		<div id="div2" onmouseenter="senter()" onmouseleave="leave()" onmousemove="move()" 
		style="width: 300px; height: 300px; background-color: blue;"></div>



		<form action="" method="post">
			用户名: <input type="text" id="names" value="" onfocus="onname()" onblur="leavename()" ><br>
			密码: <input type="password" id="pwd" value="" onfocus="onpwd()" onblur="leavepwd()"><br>
			<button type="button" id="btu4" onclick="btclick">提交</button>
		</form>


		<div id="div3"style="width: 100px; height: 100px; background-color: blue;"></div>


	</body>
	<script type="text/javascript">
		function btuclick()
		{
			console.log('按钮被点击了');
		}

		document.getElementById('but2').onclick=function()
		{
			console.log('按钮2被点击了');
		}
		
		document.getElementById('but3').onclick=btuclick;

		function divclick()
		{
			console.log('div1被点击了');
		}



		function senter()
		{
			console.log('进入div2');
		}
		function leave()
		{
			console.log('离开div2');
		}
		function move()
		{
			console.log('在div2中移动');
		}




		function onname()
		{
			console.log('用户正在输入名称');
		}
		function leavename()
		{
			var names=document.getElementById('names')
			if(names.value=='')
			{
				console.log('完成了用户名的输入');
				alert('没有输入用户名');
				return;

			}
		}
		function onpwd()
		{
			console.log('用户正在输入密码');
		}
		function leavepwd()
		{
			var pwd=document.getElementById('pwd')
			if(pwd.value=='')
			{
				alert('没有输入密码');
				return;
			}
		}
		function btclick()
		{
			var names=document.getElementById('names');
			var pwd=document.getElementById('pwd');
			if(names.value && pwd.value =='')
			{
				console.log('用户名和密码为空');
				return;
			}
			else if(name.value=='' )
			{
				console.log('用户名为空');
			}
			else
			{
				console.log('密码为空');
			}

		}


		

	</script>
</html>
